<template>
	<view class="comment u-f paren">
		<image :src="item.user.userpic" mode="widthFix"/>
		<view class="comment__body u-f">
			<text class="comment__body--title">{{item.user.username}}</text>
			<text class="comment__body--content">{{item.data}}</text>
			<text class="comment__body--time">{{item.createTime}}</text>
			<!-- 孩子节点 -->
			<view class="comment__body__child" v-if="item.comments?.length>0">
				<comment v-for="item2 in item.comments" :key="item2.id" :item="item2"/>		
			</view>
		</view>
	
	</view>
</template>

<script setup  name="comment">
	/**
	 * {
        "id": "1679078485289394178",
        "user": {
            "id": "1678060293272203265",
            "username": "tan",
            "userpic": "http://rxh2rq7gn.hn-bkt.clouddn.com/2023/07/10/16377a8970114aa783f0291196b61dc4.png",
            "sex": 0,
            "age": 20
        },
        "fid": 0,
        "funm": 0,
        "data": "你好",
        "createTime": "2023-07-13 20:38:11",
        "comments": []
    },
	 */
	const props = defineProps({
		item:Object,
		required:true
	})
</script>

<style scoped lang="scss">
	.comment {
		&.paren{	
		 padding: 16upx 20upx;
		 
		}
		>image {
			border-radius: 50%;
			width: 60upx;
			height: 60upx;
			margin-right: 20upx;
		}
		&__body{
			flex: 1;
			flex-direction: column;
			>text {
				margin: 3upx 0;
			}
			&--title {
				font-size: 20upx;
				color: blueviolet;
				
			}
			&--content {
				font-size: 30upx;
			}
			&--time {
				color: #a0a0a0;
				font-size: 24upx;
			}
			&__child {
				background-color: #eee;
				border-radius: 6upx;
				margin:8upx 0;
				
			}
			
		}
	}
</style>